<template>
    <div class="home-recommond">
        <h1>推荐歌单</h1>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index" @click="selectItem(item)">
                    <div class="cover">
                    <van-image :src="item.cover" radius="10"/>
                    <span>{{ item.listen_num | numFilter(2) }}万</span>
                </div>
                <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

import { betterScrollHorizontal } from '@/common/better-scroll';
export default{
 data(){
    return{
        listData:[]
    }
 },
 created(){
    this.getSongListData()
 },

 methods:{
    getSongListData(){
        this.$request('get','/recommend/playlist/u')
        .then(res=>{
            // console.log(res)
            if(res.result == 100){
                this.listData = res.data.list;
            }
            betterScrollHorizontal(
                this,
                this.$refs.wrapper,
                this.$refs.content,
                this.listData.length,
                10
            );
        });
    },
    selectItem(item){
        const id = item.content_id;
        this.$router.push({
            name:"songlist",
            params:{
                id:id
            }
        })
    }
    // betterScrollHorizontal(num, itemWidth){
    //             this.$refs.content.computedStyleMap.width = num * itemWidth + "rem";
    //             this.$nextTick(() => {
    //             this.scroll = new BScroll(this.$refs.wrapper, {
    //                 scrollY: false,
    //                 scrollX: true,
    //                 startX: 0,

    //             })
    //         })
    //     }
  },
// filters:{
//     numFilter(value,num){
//         return parseFloat(value/10000).toFixed(num)
//     }
//   }
};
</script>

<style scoped>
 .cover{
    position: relative;
}
.cover>span{
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
}

.wrapper {
    width: 100%;
    overflow: hidden;
    /* white-space: nowrap; */
}

ul.content li{
    width: 10rem;
    display: inline-block;
    vertical-align: top;
}
ul.content li *{
            margin: 0 0.1rem;
}
ul.content li>span{
    font-size: 0.8rem;
    color:cadetblue;
}
</style>